<template>
  <div  class="page-layout">
    <h1>DvChartPie</h1>
    <p>饼图图表</p>

    <h2>DvChartPie Settings</h2>
    <pre> 
      下面为 DvChartPie 的 settings 配置： 
      {
        // 中心点
        center: {
          type: Array,
          default() {
            return ['50%', '50%']
          }
        },
        
        // 饼图的半径
        radius: {
          type: [String, Number, Array],
          default() {
            return [0, '75%']
          }
        },
        // 图例
        legend: {
          type: [String, Object],
          default: 'horizontal',
          validator(val) {
            return ['horizontal', 'vertical'].includes(val) || typeof val === 'object'
          }
        },
        
        // 玫瑰图
        roseType: {
          type: [Boolean, String],
          default: false,
          validator(val) {
            return [true, false, 'radius', 'area'].includes(val)
          }
        },
        
        // 限制个数，超出的合并成其他
        limit: Number,
        
        // 层级 实现 多圆饼图, 二维数组
        level: Array,
        
        // 层级饼图的分隔大小（占比百分比）
        levelGap: {
          type: Number,
          default: 10
        },
        // 是否添加阴影 (默认不使用， 在大屏中可以显示阴影)
        // Object 配置： { shadowBlur: Number, shadowColor: String, shadowOffsetX: 0 , shadowOffsetY: 0 }
        shadow: {
          type: [Boolean, Object],
          default: false
        },
        // 是否使用setting 配置 color  
        colorful: {
          type: Boolean,
          default: true
        },
        // 颜色，colorful=false 有效
        color: {
          type: [Number, String],
          default: 0
        }
        
      }     
    </pre>

    <h2>example1 基本使用</h2>
    <textarea readonly style="width: 800px; height: 100px">
      <dv-chart-pie :data="data1" fit ></dv-chart-pie>
      const data1 = ref({
        columns: ['渠道', '访问量'],
        rows: [ ['直接访问', 320], ['邮件营销', 302], ['联盟广告', 334], ['视频广告', 390], ['搜索引擎', 330], ['电梯广告', 320] ]
      }) 
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-pie :data="data1" fit ></dv-chart-pie>
    </div>
    <br/>

    <h2>example2 settings使用</h2>
    <h3>
      settings.center / settings.radius
    </h3>
    <textarea readonly style="width: 800px; height: 60px">
      <dv-chart-pie :data="data1" fit :settings="{ center: ['30%', '50%'], radius: ['25%', '40%'] }"></dv-chart-pie> 
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-pie :data="data1" fit :settings="{
        center: ['30%', '50%'],
        radius: ['25%', '40%']
      }"></dv-chart-pie>
    </div> 
    <br/>

    <h3>
      settings.legend (vertical: 垂直显示图例 / horizontal：水平显示图例)
    </h3> 
    <textarea readonly style="width: 800px; height: 60px">
      <dv-chart-pie :data="data1" fit :settings="{ legend: 'vertical' }"></dv-chart-pie>
    </textarea>
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-pie :data="data1" fit :settings="{
        legend: 'vertical'
      }"></dv-chart-pie>
    </div> 
    <br/>

    <h3>
      settings.roseType 玫瑰图
    </h3> 
    <textarea readonly style="width: 800px; height: 60px">
      <dv-chart-pie :data="data1" fit :settings="{ roseType: true }"></dv-chart-pie>
    </textarea>
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-pie :data="data1" fit :settings="{roseType: true}"></dv-chart-pie>
    </div> 
    <br/>

    <h3>
      settings.limit: 控制饼图最多区块数，多出的折叠为其他
    </h3> 
    <textarea readonly style="width: 800px; height: 120px">
      <dv-chart-pie :data="data1" fit :settings="{ limit: 3 }"></dv-chart-pie>
      const data1 = ref({
        columns: ['渠道', '访问量'],
        rows: [ ['直接访问', 320], ['邮件营销', 302], ['联盟广告', 334], ['视频广告', 390], ['搜索引擎', 330], ['电梯广告', 320] ]
      }) 
    </textarea>
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-pie :data="data1" fit :settings="{limit: 3}"></dv-chart-pie>
    </div> 
    <br/>

    <h3>
      settings.level 、 settings.levelGap (饼图分层)
    </h3> 
    <textarea readonly style="width: 800px; height: 200px">
      <dv-chart-pie :data="data1" fit :settings="{
        radius: ['20%', '80%'],
        levelGap: 15,
        level: [['视频广告','搜索引擎'], ['直接访问','邮件营销'], ['电梯广告', '联盟广告']],
        legend: 'vertical'
      }"></dv-chart-pie>

      data1 = {
        columns: ['渠道', '访问量'],
        rows: [ ['直接访问', 320], ['邮件营销', 302], ['联盟广告', 334], ['视频广告', 390], ['搜索引擎', 330], ['电梯广告', 320] ]
      }
       
    </textarea>
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-pie :data="data1" fit :settings="{
        radius: ['20%', '80%'],
        levelGap: 15,
        level: [['视频广告','搜索引擎'], ['直接访问','邮件营销'], ['电梯广告', '联盟广告']],
        legend: 'vertical'
      }"></dv-chart-pie>
    </div> 
    <br/>

    <h2>
      结合dv-page  (settings="{shadow: true}")
    </h2>
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit>
          <dv-box x-align="center" y-align="middle" width="80%" height="80%"  >
            <dv-chart-pie :data="data1" fit :settings="{shadow: true}" debug></dv-chart-pie>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 

    <br/><br/>
    <h2>更多个性化配置</h2>
    <p>参考 图表组件 extend配置的用法， <router-link to="/example/extend-use">extend 配置使用</router-link></p>
    <br/><br/>
  </div>

</template>
<script setup lang="ts" >
import {DvPage, DvBox, DvChartPie} from '$comp/index';
import {ref} from 'vue' 
const data1 = ref({
  columns: ['渠道', '访问量'],
  rows: [
      ['直接访问', 320],
      ['邮件营销', 302],
      ['联盟广告', 334],
      ['视频广告', 390],
      ['搜索引擎', 330],
      ['电梯广告', 320]
  ]
}) 


 
// import demoWarp from '@/components/demo-warp.vue';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;
  
 }
</style>